<template>
	<!-- 三进打卡情况的反馈组件 -->
	
	<view class="card-wrapper" @click="to_sub_page()">
		<u-row>
			<u-col :span="11">
				<view class="my-sub-title">{{ info.name }}</view>
			</u-col>
			<u-col :span="1">
				<u-icon 
					name="arrow-right">
				</u-icon>
			</u-col>
		</u-row>
		
		
		<!-- 具体信息 -->
		<u-row style="margin-top: 20rpx;">
			<u-col :span="6">
				<view class="flex-col" style="color: #39B54A;">
					<view class="numeric">{{ finished }}</view>
					<view class="desc">已提交</view>
				</view>
			</u-col>
			
			<u-col :span="6">
				<view class="flex-col" style="color: #d11e21;">
					<view class="numeric">{{ unfinished }}</view>
					<view class="desc">未提交</view>
				</view>
			</u-col>
		</u-row>
		<u-line-progress class="line-bar" :height="10" :show-percent="false" 
		:active-color="responsiveColor" :percent="finishedRate"></u-line-progress>
	</view>
</template>

<script>
	export default {
		props: {
			info: Array,
			name: String 
		},
		methods: {
			to_sub_page: function(name, filter_time) {
				console.log('filter_time', filter_time)
				uni.navigateTo({
				    url: 'sub_page?name=' + this.info.name + '&obj=' + JSON.stringify(this.info)
					
				
				});
			}
		},
		computed: {
			unfinished: function() {
				return this.info.filter(ele => {
					return ele.enterList.length === 0
				}).length
			},
			finished: function() {
				return this.info.filter(ele => {
					return ele.enterList.length !== 0
				}).length
			},
			finishedRate: function() {
				return 100 * this.finished / (this.finished + this.unfinished)
			},
			responsiveColor: function() {
				if (this.finishedRate >= 66) {
					return 'limegreen'
				} 
				if (this.finishedRate >= 33) {
					return 'orange'
				}
				return 'red'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	.flex-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.numeric {
		font-weight: 600;
		font-size: 15px;
	}
	
	.desc {
		font-weight: 700;
		font-size: 11px;
	}
	
	.line-bar {
		margin-top: 30rpx;
	}
</style>
